<!--
 * @Author: White
 * @description: 播放器组件
 * @LastEditTime: 2021-09-01 11:48:25
-->

<template>
    <!-- 组件 -->
    <div class="main" :style="{ 'color': theme.text, 'background': theme.color }">
        <!-- 进度 -->
        <div class="bar-progress" :style="{ width: `${playRate}%` }"></div>
        <!-- 工具 -->
        <div class="content-progress">
            <audio ref="audio" class="audio-element" :src="url" controls></audio>
            <!-- 歌曲信息 -->
            <div class="progress-images">
                <div class="wrap" v-if="currentSongUrl">
                    <!-- 歌曲图片 -->
                    <div class="wrap-img" @click="songInfoDialog">
                        <img :src="currentSongUrl.songs[0].al.picUrl+'?param=80y80'"/>
                        <div class="mask"></div>
                    </div>
                    <!-- 歌曲详情 -->
                    <div class="wrap-info">
                        <div class="title">{{currentSongUrl.songs[0].name}}  <span class="author">  -  {{currentSongUrl.songs[0].ar[0].name}}</span>
                        </div>
                        <div class="time">
                            <span>{{second(currentSongUrl.songs[0].dt)}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 播放按键 -->
            <div class="progress-play">
                <!-- 上一首 -->
                <div class="back">
                    <svg t="1629857983692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7046" width="200" height="200"><path d="M364.302083 465.602819L687.954365 218.588294c38.416414-29.327534 93.791393-1.929039 93.791392 46.396277v494.029051c0 48.325316-55.374979 75.725617-93.791392 46.398084L364.302083 558.397181c-30.600916-23.357989-30.600916-69.436372 0-92.794362zM238.945254 780.798397V451.684117v-164.562559c0-19.628152-5.904521-60.475733 17.057907-75.841215 25.523642-17.068744 59.747828 1.210165 59.747828 31.919454v493.676839c0 19.628152 5.915358 60.473927-17.047069 75.841215-25.53448 17.068744-59.758666-1.211971-59.758666-31.919454z" fill="#d81e06" p-id="7047"></path></svg>
                </div>
                <!-- 暂停 -->
                <div class="stop" @click="playAndPause">
                    <svg v-if="!isPause" t="1629858872871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13190" width="200" height="200"><path d="M512 0A512 512 0 1 0 1024 512 512.589353 512.589353 0 0 0 512 0z m223.953957 535.574101l-294.676259 221.007194a29.467626 29.467626 0 0 1-17.680576 5.893525 29.467626 29.467626 0 0 1-29.467626-29.467626v-442.014388a29.467626 29.467626 0 0 1 47.148202-23.574101l294.676259 221.007194a29.467626 29.467626 0 0 1 0 47.148202z" fill="#d81e06" p-id="13191"></path></svg>
                    <svg v-if="isPause" t="1629858813104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11391" width="200" height="200"><path d="M512 0C229.227 0 0 229.227 0 512s229.227 512 512 512 512-229.227 512-512S794.773 0 512 0z m-60.832 704.742c0 34.191-25.027 62.18-55.617 62.18s-55.617-27.975-55.617-62.18V319.258c0-34.19 25.027-62.18 55.617-62.18s55.617 27.975 55.617 62.18z m225.946 0c0 34.191-25.028 62.18-55.617 62.18s-55.618-27.975-55.618-62.18V319.258c0-34.19 25.028-62.18 55.618-62.18s55.617 27.975 55.617 62.18z" p-id="11392" fill="#d81e06"></path></svg>
                </div>
                <!-- 下一首 -->
                <div class="next">
                    <svg t="1629858048072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8593" width="200" height="200"><path d="M655.706179 465.602819L332.053897 218.588294c-38.414608-29.327534-93.791393-1.929039-93.791392 46.396277v494.029051c0 48.325316 55.376785 75.725617 93.791392 46.398084l323.652282-247.014525c30.602722-23.357989 30.602722-69.436372 0-92.794362zM781.064814 780.798397V451.684117v-164.562559c0-19.628152 5.904521-60.475733-17.057907-75.841215-25.523642-17.068744-59.747828 1.210165-59.747828 31.919454v493.676839c0 19.628152-5.915358 60.473927 17.047069 75.841215 25.532673 17.068744 59.758666-1.211971 59.758666-31.919454z" fill="#d81e06" p-id="8594"></path></svg>
                </div>
            </div>
            <!-- 小工具 -->
            <div class="progress-tools">
                <el-popover
                    placement="top"
                    :width="20"
                    trigger="click">
                    <!-- Slider 滑块 -->
                    <el-slider v-model="volume" vertical height="200px"></el-slider>
                    <template #reference>
                        <div class="voice-tools">
                            <svg t="1629875064918" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2137" width="200" height="200"><path d="M284.16 724.48c-5.12 0-7.68 0-12.8-2.56l-30.72-17.92H135.68c-15.36 0-25.6-10.24-25.6-25.6v-253.44c0-15.36 10.24-25.6 25.6-25.6h104.96l30.72-17.92c12.8-7.68 28.16-2.56 35.84 10.24 7.68 12.8 2.56 28.16-10.24 35.84l-35.84 20.48c-5.12 2.56-7.68 2.56-12.8 2.56H161.28v202.24h84.48c5.12 0 7.68 0 12.8 2.56l35.84 20.48c12.8 7.68 15.36 23.04 10.24 35.84-5.12 7.68-12.8 12.8-20.48 12.8z" fill="#333333" p-id="2138"></path><path d="M496.64 847.36c-5.12 0-7.68 0-12.8-2.56l-235.52-135.68 25.6-43.52 197.12 112.64V322.56l-194.56 115.2-25.6-43.52 235.52-135.68c7.68-5.12 17.92-5.12 25.6 0s12.8 12.8 12.8 23.04v542.72c0 10.24-5.12 17.92-12.8 23.04-7.68-2.56-12.8 0-15.36 0zM801.28 834.56l-35.84-35.84 17.92-17.92c128-128 128-335.36 0-463.36l-17.92-17.92 35.84-35.84 17.92 17.92c148.48 148.48 148.48 386.56 0 535.04l-17.92 17.92z" fill="#333333" p-id="2139"></path><path d="M719.36 752.64L683.52 716.8l17.92-17.92c38.4-38.4 61.44-92.16 61.44-148.48 0-56.32-23.04-107.52-61.44-148.48l-17.92-17.92 35.84-35.84 17.92 17.92c48.64 48.64 76.8 115.2 76.8 184.32s-28.16 135.68-76.8 184.32l-17.92 17.92z" fill="#333333" p-id="2140"></path><path d="M634.88 668.16l-35.84-35.84 17.92-17.92c17.92-17.92 28.16-40.96 28.16-64s-10.24-48.64-28.16-64l-17.92-17.92 35.84-35.84 17.92 17.92c28.16 28.16 40.96 64 40.96 102.4s-15.36 74.24-40.96 102.4l-17.92 12.8z" fill="#333333" p-id="2141"></path></svg>
                        </div>
                    </template>
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex'
import { reactive, computed, watch, toRefs, ref } from 'vue'
import { second } from '@/utils/index'
export default {
    setup() {
        const store = useStore()
        const theme = computed(() => store.state.theme)
        //音频ref
        const audio = ref(null)

        // 当前歌曲播放状态
        const songState = reactive({
            url: "",
            data: [],
            playRate: 0,  /** 播放进度 */
            volume: 50,  /** 音量初始化 */
            isPause: false,  /** 歌曲是否已暂停 */
            songDuration: 0,  /** 歌曲时长 */
            playedSongDuration: 0  /** 已播放歌曲时长 */
        })
        
        // 当前播放歌曲信息
        const currentSongUrl = computed(() => {
            return store.state.currentSong
        })

        // vuex歌曲变化触发自动播放
        watch(() => currentSongUrl.value, () => {
            let audioDom = audio.value
            audioDom.volume = .5
            songState.playRate = 0
            songState.data = store.state.currentSong
            songState.playRate = audioDom.currentTime / audioDom.duration * 100  //计算当前时间条
            setTime()
            let id = store.state.currentSong.songs[0].id
            songState.url = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
            if (songState.url) {
                audioDom.play()
                songState.isPause = true
            } else {
                audioDom.pause()
                songState.isPause = false
            }
        })

        // 监听音量
        watch(() => songState.volume, () => {
            let audioDom = audio.value
            audioDom.volume = songState.volume / 100  //音量
        })

        // 歌曲详情弹窗
        function songInfoDialog() {
            let val = store.state.songInfoDialog
            store.commit('setSongInfoDialog', val)
        }

        function setTime() {
            const data = setInterval(() => {
                let audioDom = audio.value
                if (songState.playRate < 100) {
                    songState.playRate = audioDom.currentTime / audioDom.duration * 100
                }
            }, 1000)
        }

        // 播放/暂停
        function playAndPause() {
            let audioDom = audio.value
            if(audioDom.paused) {
                audioDom.play()
                songState.isPause = true
            }else {
                audioDom.pause()
                songState.isPause = false
            }
            store.commit('setPlayer', songState.isPause)
        }

        return {
            ...toRefs(songState),
            currentSongUrl,
            theme,
            audio,
            songInfoDialog,
            playAndPause,
            second
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    position: relative;
}
// 进度条进度
.bar-progress {
    position: absolute;
    left: 0;
    top: -2px;
    height: 2px;
    background-color: #d33a30;
    cursor: pointer;
}
// 进度条工具
.content-progress {
    width: 100%;
    height: 60px;
    padding: 0px 10px;
    box-sizing: border-box;
    border-radius: 0px 0px 10px 10px;
    display: flex;
    align-items: center;
    .audio-element {
        display: none;
    }
    .progress-images {
        flex: 1;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .wrap {
            display: flex;
            align-items: center;
            .wrap-img {
                width: 40px;
                height: 40px;
                border-radius: 4px;
                margin-right: 10px;
                cursor: pointer;
                position: relative;
                .mask {
                    position: absolute;
                    background: rgba(255, 255, 255, 0.6);
                    color: #ffffff;
                    opacity: 0;
                    left: 0;
                    top: 0;
                    width: 40px;
                    height: 40px;
                    pointer-events:none;
                }
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 4px;
                    cursor: pointer;
                }
            }
            .wrap-img:hover .mask {
               opacity: 1;
            }
            .wrap-info {
                display: flex;
                flex-direction: column;
                height: 40px;
                justify-content: center;
                .title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;
                    color: #4d4d4d;
                    font-size: 14px;
                    font-weight: 700;
                    .author {
                        color: #666;
                        font-size: 12px;
                        font-weight: 300;
                    }
                }
                .time {
                    display: flex;
                    align-items: center;
                    color: #666;
                    font-size: 12px;
                    font-weight: 300;
                }
            }
        }
    }
    .progress-play {
        display: flex;
        align-items: center;
        .back {
            width: 26px;
            height: 26px;
            cursor: pointer;
            svg {
                width: 26px;
                height: 26px;
            }
        }
        .stop {
            width: 40px;
            height: 40px;
            cursor: pointer;
            padding: 0px 10px;
            svg {
                width: 40px;
                height: 40px;
            }
        }
        .next {
            width: 26px;
            height: 26px;
            cursor: pointer;
            svg {
                width: 26px;
                height: 26px;
            }
        }
    }
    .progress-tools {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        .voice-tools {
            flex: 1;
            align-self: flex-end;
            display: flex;
            cursor: pointer;
            align-items: center;
            svg {
                width: 26px;
                height: 26px;
            }
        }
    }
}
</style>